<script setup>
import { createApp, reactive, onMounted, computed } from 'vue';
import { IndexBar, IndexAnchor } from 'vant';
import { getcities } from "../api/home";
import { useRouter } from 'vue-router';

const app = createApp();
app.use(IndexBar);
app.use(IndexAnchor);

const data = reactive({
  hot: [],
  cts: []
});

onMounted(() => {
  getcities().then(res => {
    console.log('城市列表', res);
    data.cts = res.data.cts.sort((a, b) => a.py.localeCompare(b.py)).map(city => ({
      ...city,
      cities: []
    }));
  }),
    getcities().then(res => {
      console.log('热门', res);
      data.hot = res.data.hot;
    })

});

const sortedCities = computed(() => {
  const sorted = [...data.cts].sort((a, b) => a.py.localeCompare(b.py));
  const result = [];

  for (const city of sorted) {
    const letter = city.py.charAt(0).toUpperCase();
    const index = result.findIndex(item => item.letter === letter);

    if (index === -1) {
      result.push({ letter, cities: [city] });
    } else {
      result[index].cities.push(city);
    }
  }

  return result;
});
const router = useRouter();
const pickCity = (city) => {
  const selectedCity = city ? { nm: city.nm, id: city.id } : { nm: '贵港', id: '295' };
  router.push({ name: 'movie', query: { city: selectedCity.nm, cityId: selectedCity.id } });
};

</script>

<script>
export default {
  data() {
    return {
      indexList: ['定位', '最近', '热门'],
    };
  }, mounted() {
    const letter = {};
    for (let i = 65; i <= 90; i++) {
      const char = String.fromCharCode(i);
      if (char !== 'I' && char !== 'O' && char !== 'U' && char !== 'V') {
        letter[char] = true;
      }
    }
    this.indexList = this.indexList.concat(Object.keys(letter));
  },
}
</script>
<template>

  <section id="city-list" class="city-list-container">
    <van-index-bar :index-list="indexList">

      <van-index-anchor index="定位">定位城市</van-index-anchor>

      <div class="city-list city-list-inline clearfix">
        <div class="location-city " data-bid="b_movie_rqbvw5gr_mc">定位失败，请稍后重试</div>
      </div>

      <section class="history-city-list">
        <van-index-anchor index="最近">最近访问城市</van-index-anchor>
        <div class="city-list city-list-inline clearfix">
          <div class="city-item" data-nm="上海" data-id="10">上海</div>
          <div class="city-item" data-nm="北海" data-id="295">贵港</div>
          <div class="city-item" data-nm="广州" data-id="21">广州</div>
          <div class="city-item" data-nm="深圳" data-id="22">深圳</div>
        </div>
      </section>
      <section>
        <van-index-anchor index="热门">热门城市</van-index-anchor>
        <div class="city-list city-list-inline clearfix">
          <div class="city-item" v-for="item in data.hot" :key="item" @click="pickCity(item)">{{ item }}</div>
        </div>
      </section>
      <section v-for="item in sortedCities" :key="item.letter">
        <van-index-anchor :index="item.letter">{{ item.letter }}</van-index-anchor>
        <div class="city-list city-list-block clearfix">
          <div class="city-item" v-for="city in item.cities" :key="city.id" @click="pickCity(city)">{{ city.nm }}</div>
        </div>
      </section>
    </van-index-bar>
  </section>
</template>
<style scoped>
@import url('../assets/css/citylist.css');
</style>